// 基本信息
import DialogBox from "@/components/DialogBox";
// import SelectProductList from "@/components/Sansan/SelectProductList";
import { ElForm } from "element-plus";
import { defineComponent, PropType } from "vue";
// import SelectDeviceListAll from "@/components/Sansan/SelectDeviceListAll";
interface DeviceForm {
	[key: string]: any;
}
export default defineComponent({
	props: {
		width: String,
		title: String,
		detail: {
			type: Object as PropType<DeviceForm | any>,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, emit }) {
		type FormInstance = InstanceType<typeof ElForm>;
		const formRef = ref<FormInstance>();
		const formRule = reactive({
			name: [{ required: true, message: "请输入", trigger: "change" }]
		});

		const validData = () => {
			formRef.value?.validate(valid => {
				if (valid) {
					emit("submit");
				}
			});
		};
		onMounted(async () => {});

		// const state = reactive({
		// 	deviceList: []
		// });
		// const changeProduct = (val: any) => {
		// 	props.detail.productId = val;
		// 	devRef.value.init();
		// 	state.deviceList = [];
		// };
		// const devRef = ref();
		// watch(
		// 	() => props.detail,
		// 	() => {
		// 		state.deviceList = props.detail.filters?.sns ? props.detail.filters.sns.split(",") : "";
		// 	}
		// );
		return () => {
			return (
				<DialogBox {...attrs} width={props.width} title={props.title} onConfirm={() => validData()}>
					<el-form model={props.detail} ref={formRef} rules={formRule} label-width="100px">
						<el-form-item label="任务名称" prop="name">
							<el-input v-model={props.detail.name} placeholder="请输入" />
						</el-form-item>
						{/* <el-form-item label="所属产品" prop="productId">
							<SelectProductList v-model={props.detail.productId} onChange={changeProduct} />
						</el-form-item>
						<el-form-item label="设备" prop="productId">
							<SelectDeviceListAll ref={devRef} v-model={state.deviceList} detail={props.detail} multiple />
						</el-form-item> */}
						{!props.detail.id ? (
							<el-form-item label="跳转到任务">
								<el-switch v-model={props.detail.switchVal} />
							</el-form-item>
						) : null}
					</el-form>
				</DialogBox>
			);
		};
	}
});
